<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>--%>
<!DOCTYPE html>
<html lang="en">

<head>
    <%--<base href="<%=basePath%>">--%>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>Dashboard - Ace Admin</title>

    <meta name="description" content="overview  stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

        <!-- bootstrap & fontawesome -->
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <%--<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" />--%>
        <link rel="stylesheet" href="font-awesome/4.5.0/css/font-awesome.min.css" />

        <!-- page specific plugin styles -->

        <!-- text fonts -->
        <link rel="stylesheet" href="css/fonts.googleapis.com.css" />

        <!-- ace styles -->
        <link rel="stylesheet" href="css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

        <!--[if lte IE 9]>
        <link rel="stylesheet" href="css/ace-part2.min.css" class="ace-main-stylesheet" />
        <![endif]-->
        <link rel="stylesheet" href="css/ace-skins.min.css" />
        <link rel="stylesheet" href="css/ace-rtl.min.css" />

        <!--formvalidate-->
        <link rel="stylesheet" href="css/style.css"/>
        <!--[if lte IE 9]>
        <link rel="stylesheet" href="css/ace-ie.min.css" />
        <![endif]-->

        <!-- inline styles related to this page -->

        <!-- ace settings handler -->
        <script src="js/ace-extra.min.js"></script>

        <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

        <!--[if lte IE 8]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
</head>

<body class="no-skin">
<div id="navbar" class="navbar navbar-default navbar-collapse">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>
        <div class="navbar-header pull-left">
            <a href="index.html" class="navbar-brand">
                <small>
                    <i class="fa fa-leaf"></i>
                    Ace Admin
                </small>
            </a>
        </div>
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="images/avatars/user.jpg" alt="Jason's Photo"/>
                        <span class="user-info">
									<small>Welcome,</small>
									Jason
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-cog"></i>
                                Settings
                            </a>
                        </li>

                        <li>
                            <a href="profile.html">
                                <i class="ace-icon fa fa-user"></i>
                                Profile
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-power-off"></i>
                                Logout
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="main-container" id="main-container">
    <div class="sidebar responsive ace-save-state" id="sidebar">
        <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {
            }
        </script>
        <ul class="nav nav-list navs">

        </ul>

    </div>

    <div class="main-content">
        <div class="breadcrumbs">
            <ul class="nav nav-tabs navs-tabs" id="myTab" style="height: 41px;">
                <li class="active">
                    <a data-toggle="tab" href="#home">
                        <i class="green ace-icon fa fa-home bigger-120"></i>
                        Home
                    </a>
                </li>


            </ul>

        </div>

        <div class="page-content">
            <!-- setting box goes here if needed -->


            <div class="tab-content tabs-contents">


            </div>
            <!-- /.col -->

            <!-- /.page-content -->
        </div>
        <!-- /.main-content -->

        <!-- footer area -->

    </div>
    <!-- /.main-container -->
</div>
<!-- list of script files -->
</body>
<!--[if !IE]> -->
<script src="js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="js/bootstrap.min.js"></script>

<!-- page specific plugin scripts -->

<!--[if lte IE 8]>
<script src="js/excanvas.min.js"></script>
<![endif]-->
<script src="js/jquery-ui.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/jquery.easypiechart.min.js"></script>
<script src="js/jquery.sparkline.index.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

<!-- ace scripts -->
<script src="js/ace-elements.min.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/bootstrapValidator.min.js"></script>


<!-- page specific plugin scripts -->
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.jqGrid.min.js"></script>
<script src="js/grid.locale-en.js"></script>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    jQuery(function ($) {

        //模态窗口可拖拽
        $(document).on("show.bs.modal", ".modal", function () {
            $(this).draggable();
            $(this).css("overflow-y", "scroll");
            // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
        });

        var m = 1;

        $.ajax({
            url: 'menu/findAllFunctionList',
            dataType: 'json',
            async: 'true',
            type: 'get',
            success: function (data) {
                for (var i = 0; i < data.length; i++) {

                    var child = '';
                    for (var j = 0; j < data[0].children.length; j++) {
                        m++;
                        child += '<li class="childclick" data-index="a' + m + '" data-url="' + data[0].children[j].url + '"><a href="#" ><i class="menu-icon fa fa-tachometer"></i><span class="menu-text">' + data[0].children[j].text + '</span></a><b class="arrow"></b><li>'
                    }
                    parent += '<li><a href="#" class="dropdown-toggle"><i class="menu-icon fa fa-tachometer"></i><span class="menu-text"> ' + data[0].text + '</span><b class="arrow fa fa-angle-down"></b></a><b class="arrow"></b><ul class="submenu">' + child + '</ul><li>'


                }
                $('.navs').html(parent);
                $('.childclick').on('click', function () {

                    var index = $(this).attr('data-index');
                    var content = $(this).find('.menu-text').html();
                    var mq = $('.navs-tabs li').length;
                    var a = [];
                    var flag = true;
                    var newtabs = '<li><a data-toggle="tab" href="#' + index + '"><i class="green ace-icon fa fa-home bigger-120"></i>' + content + '<span class="badge badge-danger"></span><i class="ace-icon fa fa-times red2 close"></i></a></li>';
                    var newcontents = '<div id="' + index + '" class="tab-pane fade"></div>';
                    for (var i = 0; i < mq; i++) {
                        a.push($('.navs-tabs li').eq(i).find('a').attr('href').split('#')[1])
                    }

                    for (var i = 0; i < a.length; i++) {
                        if (a[i] == index) {
                            flag = false;
                            $('.navs-tabs').find('#' + index).addClass('active').siblings().removeClass('active');
                            $('.tabs-contents').find('#' + index).addClass('in active').siblings().removeClass('in active');

                            break;
                        }

                    }

                    if (flag) {
                        $('.navs-tabs').append(newtabs);
                        $('.tabs-contents').append(newcontents);
                        $('.tabs-contents').find('#' + index).addClass('in active').siblings().removeClass('in active')
                    }

                    <!--移除tab-->
                    $('.close').on('click', function () {
                        var ids = $(this).parent().attr('href').split('#')[1];
                        $(this).parent().parent().remove();
                        $('#' + ids).remove();
                    });

                    $("#" + index).load($(this).attr('data-url'))


                })
            }
        })
    });

</script>

</html>